<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Static load method - LazyLoad demos</title>
    <style>
      html {
        box-sizing: border-box;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        background: grey;
      }

      body {
        max-width: 1280px;
        margin: 0 auto;
        background: white;
      }

      .products {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .product {
        display: block;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 305px;
      }

      .product img {
        display: block;
        width: 305px;
        height: 360px;
      }

      .product:hover .product-image__b.loaded {
        opacity: 1;
      }

      .product-image__a {
        margin: 0 auto;
      }

      .product-image__b {
        opacity: 0;
        transition: opacity 0.5s;
        position: absolute;
        top: 0;
        left: calc(50% - 305px / 2);
      }

      img:not([src]) {
        visibility: hidden;
      }
    </style>
  </head>

  <body>
    <h1>Static load method demo</h1>
    <div class="products">
      <!-- Eagerly loading 8 -->
      <a href="#" class="product">
        <img
          alt="01a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=01a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=01a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=01a 2x
          "
        />
        <img
          alt="01b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=01b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=01b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=01b 2x"
        />
        <p>Product 01</p>
      </a>
      <a href="#" class="product">
        <img
          alt="02a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=02a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=02a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=02a 2x
          "
        />
        <img
          alt="02b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=02b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=02b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=02b 2x"
        />
        <p>Product 02</p>
      </a>
      <a href="#" class="product">
        <img
          alt="03a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=03a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=03a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=03a 2x
          "
        />
        <img
          alt="03b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=03b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=03b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=03b 2x"
        />
        <p>Product 03</p>
      </a>
      <a href="#" class="product">
        <img
          alt="04a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=04a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=04a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=04a 2x
          "
        />
        <img
          alt="04b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=04b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=04b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=04b 2x"
        />
        <p>Product 04</p>
      </a>
      <a href="#" class="product">
        <img
          alt="05a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=05a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=05a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=05a 2x
          "
        />
        <img
          alt="05b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=05b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=05b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=05b 2x"
        />
        <p>Product 05</p>
      </a>
      <a href="#" class="product">
        <img
          alt="06a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=06a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=06a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=06a 2x
          "
        />
        <img
          alt="06b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=06b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=06b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=06b 2x"
        />
        <p>Product 06</p>
      </a>
      <a href="#" class="product">
        <img
          alt="07a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=07a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=07a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=07a 2x
          "
        />
        <img
          alt="07b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=07b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=07b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=07b 2x"
        />
        <p>Product 07</p>
      </a>
      <a href="#" class="product">
        <img
          alt="08a"
          class="product-image__a"
          src="https://via.placeholder.com/305x360/7FD1B9/333333?text=08a"
          srcset="
            https://via.placeholder.com/305x360/7FD1B9/333333?text=08a 1x,
            https://via.placeholder.com/610x720/7FD1B9/333333?text=08a 2x
          "
        />
        <img
          alt="08b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=08b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=08b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=08b 2x"
        />
        <p>Product 08</p>
      </a>
      <!-- 8 more! -->
      <a href="#" class="product">
        <img
          alt="09a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=09a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=09a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=09a 2x"
        />
        <img
          alt="09b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=09b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=09b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=09b 2x"
        />
        <p>Product 09</p>
      </a>
      <a href="#" class="product">
        <img
          alt="10a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=10a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=10a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=10a 2x"
        />
        <img
          alt="10b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=10b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=10b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=10b 2x"
        />
        <p>Product 10</p>
      </a>
      <a href="#" class="product">
        <img
          alt="11a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=11a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=11a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=11a 2x"
        />
        <img
          alt="11b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=11b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=11b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=11b 2x"
        />
        <p>Product 11</p>
      </a>
      <a href="#" class="product">
        <img
          alt="12a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=12a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=12a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=12a 2x"
        />
        <img
          alt="12b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=12b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=12b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=12b 2x"
        />
        <p>Product 12</p>
      </a>
      <a href="#" class="product">
        <img
          alt="13a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=13a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=13a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=13a 2x"
        />
        <img
          alt="13b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=13b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=13b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=13b 2x"
        />
        <p>Product 13</p>
      </a>
      <a href="#" class="product">
        <img
          alt="14a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=14a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=14a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=14a 2x"
        />
        <img
          alt="14b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=14b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=14b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=14b 2x"
        />
        <p>Product 14</p>
      </a>
      <a href="#" class="product">
        <img
          alt="15a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=15a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=15a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=15a 2x"
        />
        <img
          alt="15b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=15b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=15b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=15b 2x"
        />
        <p>Product 15</p>
      </a>
      <a href="#" class="product">
        <img
          alt="16a"
          class="lazy product-image__a"
          data-src="https://via.placeholder.com/305x360/7FD1B9/333333?text=16a"
          data-srcset="https://via.placeholder.com/305x360/7FD1B9/333333?text=16a 1x, https://via.placeholder.com/610x720/7FD1B9/333333?text=16a 2x"
        />
        <img
          alt="16b"
          class="lazy-hover product-image__b"
          data-src="https://via.placeholder.com/305x360/E56399/ffffff?text=16b"
          data-srcset="https://via.placeholder.com/305x360/E56399/ffffff?text=16b 1x, https://via.placeholder.com/610x720/E56399/ffffff?text=16b 2x"
        />
        <p>Product 16</p>
      </a>
    </div>
  </body>

  <script src="../dist/lazyload.min.js"></script>
  <script>
    (function (w, d) {
      function logElementEvent(eventName, element) {
        console.log(Date.now(), eventName, element.getAttribute("data-src"));
      }

      var callback_enter = function (element) {
        logElementEvent("🔑 ENTERED", element);
      };
      var callback_exit = function (element) {
        logElementEvent("🚪 EXITED", element);
      };
      var callback_loading = function (element) {
        logElementEvent("⌚ LOADING", element);
      };
      var callback_loaded = function (element) {
        logElementEvent("👍 LOADED", element);
      };
      var callback_error = function (element) {
        logElementEvent("💀 ERROR", element);
        element.src =
          "https://via.placeholder.com/440x560/?text=Error+Placeholder";
      };
      var callback_finish = function () {
        logElementEvent("✔️ FINISHED", document.documentElement);
      };
      var callback_cancel = function (element) {
        logElementEvent("🔥 CANCEL", element);
      };

      var options = {
        // Assign the callbacks defined above
        callback_enter: callback_enter,
        callback_exit: callback_exit,
        callback_cancel: callback_cancel,
        callback_loading: callback_loading,
        callback_loaded: callback_loaded,
        callback_error: callback_error,
        callback_finish: callback_finish
      };

      var page_ll = new LazyLoad(options);

      function mouseoverHandler(event) {
        var product = event.currentTarget;
        var lazyImg = product.querySelector(".lazy-hover");
        if (!!lazyImg.getAttribute("data-ll-status")) {
          return;
        }
        // page_ll.load(lazyImg); STILL WORKS, BUT DEPRECATED
        LazyLoad.load(lazyImg, options);
      }

      function nodeSetToArray(nodeSet) {
        return Array.prototype.slice.call(nodeSet);
      }

      function initializeMouseBehaviour() {
        const products = document.querySelectorAll(".product");
        nodeSetToArray(products).forEach(function (product) {
          product.addEventListener("mouseover", mouseoverHandler, true);
        });
      }

      initializeMouseBehaviour();
    })(window, document);
  </script>
</html>
